<template>
    <div class="formlogin">
        <!-- 
            model	表单数据对象	object
            rules	表单验证规则	object
            Form 组件提供了表单验证的功能，只需要通过 rules 属性传入约定的验证规则，并将 Form-Item 的 prop 属性设置为需校验的字段名即可。校验规则参见

            validate	对整个表单进行校验的方法，参数为一个回调函数。该回调函数会在校验结束后被调用，并传入两个参数：是否校验成功和未通过校验的字段。若不传入回调函数，则会返回一个 promise	Function(callback: Function(boolean, object))

            prop	表单域 model 字段，在使用 validate、resetFields 方法的情况下，该属性是必填的	string	传入 Form 组件的 model 中的字段
         -->

        <el-form class="demo-ruleForm" ref="loginRef" :model="userForm" label-width="auto" :rules="rules">

            <h2>后台管理系统</h2>

            <el-form-item label="用户名" prop="username">
                <el-input prefix-icon="el-icon-user" placeholder="请输入用户名" v-model="userForm.username" clearable></el-input>
            </el-form-item>
            <el-form-item label="密码" prop="password">
                <el-input prefix-icon="el-icon-key" placeholder="请输入密码" v-model="userForm.password" clearable show-password
                    @keyup.enter.native="login"></el-input>
            </el-form-item>
            <el-form-item>
                <el-button type="primary" @click="login">登录</el-button>
                <el-link href="" target="_blank" class="forgetPass">忘记密码</el-link>
            </el-form-item>
        </el-form>
    </div>
</template>
<script>
import { userlogin } from '../request/api'
export default {
    data() {
        return {
            userForm: {
                username: '',
                password: ''
            },
            rules: {
                username: [
                    { required: true, message: '请输入用户名', trigger: 'blur' },
                    { min: 3, max: 8, message: '长度在 3 到 8 个字符', trigger: 'blur' }
                ],
                password: [
                    { required: true, message: '请输入密码', trigger: 'blur' },
                    { min: 6, max: 16, message: '长度在 6 到 16 个字符', trigger: 'blur' }
                ],
            }
        }
    },
    methods: {
        login() {
            this.$refs.loginRef.validate(val => {
                if (val) {
                    // 请求接口
                    console.log(this.userForm);
                    userlogin(this.userForm).then(res => {
                        console.log(res);
                        if (res.code == 200) {
                            this.$store.dispatch('changeuserInfo', res.list)
                            this.$message.success(res.msg)
                            this.$router.push('/index')
                        } else {
                            this.$message.error(res.msg)
                        }
                    })

                }

            })
        }
    },
    mounted() {
        history.pushState(null, null, document.URL);
        window.addEventListener("popstate", function (e) {
            history.pushState(null, null, document.URL);
        }, false)
    }

}
</script>
<style lang="less" scoped>
.formlogin {
    width: 100%;
    height: 100vh;
    background-image: url('../assets/11.jpg');
    position: relative;

    .demo-ruleForm {
        box-sizing: border-box;
        width: 450px;
        height: 300px;
        padding: 30px;
        background: #eaeaea;
        text-align: center;
        position: absolute;
        top: 50%;
        left: 50%;
        transform: translate(-50%, -50%);
        border-radius: 30px;

        h2 {
            margin: 0 0 20px 0;
        }
    }

    .forgetPass {
        position: absolute;
        right: 5%;
    }
}
</style>